<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% if page.title %}
    <title>{{ page.title }}</title>
    {% else %}
    <title>{{ site.name }}</title>
    {% endif %}
    <link rel="shortcut icon" href="/images/Logo.png">
    <meta name="description" content="{{ site.description }}">
    <link rel="stylesheet" href="/styles/main.css">
    <link rel="stylesheet" href="/styles/postlist.css">
    <link rel="stylesheet" href="/styles/post.css">

    {% if site.baidu_verification %}
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    {% endif %}
    {% include table_render %}
</head>

<body>
<header>
    <div class="headerbar">
        <span class="name">VC火神-6</span>
        <ul class="menu courses">
            <li style="line-height: 3em;"><a HREF="/">首页</a></li>
            <li>
                <span>计算机程序设计</span>
                <hr>
                <ul class="submenu coureses">
                    <li><a href="/programming/dr/toc">数据表示</a></li>
                    <li><a href="/programming/dc/toc">数据计算</a></li>
                    <li><a href="/programming/fc/toc">流程控制</a></li>
                    <li><a href="/programming/ui/toc">用户交互</a></li>
                    <li>
                        <hr style="height:1.5em; margin-right: 0; margin-top: auto; margin-bottom: auto;">
                    </li>
                    <li><a href="/programming/pm/overview">程序设计方法</a></li>
                </ul>
            </li>
            <li>
                <span>计算机网络</span>
                <hr>
                <ul class="submenu courses">
                    <li><a href="/computernetworks/simulation/toc">仿真技术</a></li>
                    <li><a href="/computernetworks/sdn/toc">软件定义网络(SDN)</a></li>
                </ul>
            </li>
        </ul>
    </div>
</header>

<div class="main-container">
    <div class="leftSide">
        <div class="description">
            <p>技术领域</p>
        </div>
        <div class="categories">
            <ul>
                {% for category in site.categories %}
                <li><a href="/categories/{{ category | first }}.html" postcount="{{category | last | size}}">
                    {% assign c = category | first %}
                    {{ site.technologies[c].label }}
                </a></li>
                {% endfor %}
            </ul>
        </div>
        <div class="tagCloud"></div>
    </div>
    <div class="work-area">
        {{ content }}
    </div>
</div>

<footer>

</footer>

<script>
    let sour = document.querySelector("#markdown-toc");
    let scrollBound = false;
    let timeout = null;

    document.querySelector("#toc").style.display = 'none';
    if (sour !== null) {
        document.querySelector("#toc").append(sour);

        function onWinScrolled() {
            if (timeout !== null) clearTimeout(timeout);
            timeout = setTimeout(() => {
                sour.parentElement.style.top = document.documentElement.scrollTop + 60 + "px";
            }, 200);
        }

        if (document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)) {
            document.querySelector("#toc").style.display = 'block';
            window.addEventListener("scroll", onWinScrolled);
        }

        window.addEventListener("resize", (event) => {
            if (document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)) {
                if (document.querySelector("#toc").style.display === 'none') {
                    window.addEventListener("scroll", onWinScrolled);
                    document.querySelector("#toc").style.display = 'block';
                }
            } else {
                document.querySelector("#toc").style.display = 'none';
                window.removeEventListener('scroll', onWinScrolled);
            }
        });
    }
</script>

</body>

</html>
